<ion-header>

  <ion-navbar>
    <ion-title>{{toUser.name}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

  <div class="message-wrap">

    <div *ngFor="let msg of msgList"
         class="message"
         [class.left]=" msg.userId === toUser.id "
         [class.right]=" msg.userId === user.id ">
      <img class="user-img" [src]="msg.userAvatar" alt="" src="">
      <ion-spinner name="dots" *ngIf="msg.status === 'pending'"></ion-spinner>
      <div class="msg-detail">
        <div class="msg-info">
          <p>
            {{msg.userName}}&nbsp;&nbsp;&nbsp;{{msg.time | relativeTime}}</p>
        </div>
        <div class="msg-content">
          <span class="triangle"></span>
          <p class="line-breaker ">{{msg.message}}</p>
        </div>
      </div>
    </div>

  </div>

</ion-content>

<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'">
  <div class="input-wrap">
    <button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
      <ion-icon name="md-happy"></ion-icon>
    </button>
    <textarea #chat_input
              placeholder="Text Input"
              [(ngModel)]="editorMsg"
              (keyup.enter)="sendMsg()"
              (focusin)="onFocus()">
    </textarea>
    <button ion-button clear icon-only item-right (click)="sendMsg()">
      <ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
    </button>
  </div>
  <emoji-picker [(ngModel)]="editorMsg"></emoji-picker>
</ion-footer>
